<template>
  <div class="UserInfo">
    <Header title="个人信息"></Header>
    <div style="padding:42px 0 0 0" class="user_info">
      <div style="padding: 0 12px">
        <div style="height:80px;line-height: 80px">
          <div class="textMiddle">修改头像</div>
          <div>
            <input style="height: 60px;opacity:0;width: 60px;position: absolute;top: 50px;right: 24px;" type="file"
                   name="fileUpload"
                   accept="image/gif, image/jpeg" id="fileUp" @change="changeImg($event)"
                   ref="inputFile">
            <img style="width:60px;height:60px;border-radius: 50%;margin-top: 30px"
                 :src="UserInfo.avatar?UserInfo.avatar:'http://img.zcool.cn/community/01cd055549678e0000019ae9a22564.jpg@1280w_1l_2o_100sh.jpg'"
                 alt="">

          </div>
        </div>
        <div>
          <div class="textMiddle">姓名</div>
          <div>{{UserInfo.name}}</div>
        </div>
        <div>
          <div class="textMiddle">手机号码</div>
          <div>{{UserInfo.tel}}</div>
        </div>
        <div>
          <div class="textMiddle">出生时间</div>
          <div>{{UserInfo.birthDate}}</div>
        </div>
        <div>
          <div class="textMiddle">行业</div>
          <div>{{UserInfo.industry}}</div>
        </div>
        <div>
          <div class="textMiddle">备考科目</div>
          <div>{{UserInfo.examSubject}}</div>
        </div>
        <!--<div>-->
        <!--<div class="textMiddle">籍贯</div>-->
        <!--<div>四川成都</div>-->
        <!--</div>-->
      </div>
      <x-button type="primary" class="saveinfo" @click.native="EditUserInfo">编辑</x-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import {Group, CellBox, XButton} from 'vux'
import Header from './../Header'
import {UserInfo, ApiUrl, SizeImg} from '../../api/mine'

export default {
  data () {
    return {
      UserInfo: {}
    }
  },
  created () {
    UserInfo().then(res => {
      let UserInfo = res.data.data
      if (UserInfo.avatar) {
        UserInfo.avatar = `../${UserInfo.avatar}`
      }

      this.UserInfo = UserInfo
      this.$store.dispatch('USER_INFO', {
        userinfo: UserInfo
      })
    })
  },
  methods: {
    changeImg (e) {
      let file = e.target.files[0]
      let param = new FormData() // 创建form对象
      param.append('file', file)// 通过append向form对象添加数据
      console.log(param.get('file'))
      const isLt2M = file.size / 1024 / 1024 > Number(SizeImg())
      console.log(file.size / 1024 / 1024)
      if (isLt2M) {
        Vue.$vux.toast.text('上传文件大小不能超过2M', 'middle')
        return
      }
      Vue.$vux.loading.show({
        text: '上传中...'
      })
      axios.post(ApiUrl() + `/api/v1/authc/app/member/avatar`, param, {
        headers: {'Content-Type': 'multipart/form-data'}
      }).then(res => {
        Vue.$vux.loading.hide()
        if (res.data.status === 'success') {
          let {UserInfo} = this
          UserInfo.avatar = `../${res.data.data}`
          this.UserInfo = UserInfo
          console.log(`../${res.data.data}`, this.UserInfo)
        } else {
          Vue.$vux.toast.text('上传失败...', 'middle')
        }
      })
    },
    EditUserInfo () {
      this.$router.push({
        name: 'BindPhone',
        query: {
          type: 'edit'
        }
      })
    }
  },
  components: {
    Header,
    Group,
    CellBox,
    XButton
  }
}
</script>

<style lang="less" type="text/less">
  .UserInfo {
    font-size: 14px;
    .textMiddle {
      width: 80px;
      text-align: justify;
      text-justify: distribute-all-lines;
      text-align-last: justify;
      font-size: 15px;
    }
    .textMiddle + div {
      color: #959595;
    }
    .weui-cell {
      font-size: 14px;
      padding: 14px 15px;
    }
    .weui-cells {
      margin-top: 0px;
      &:before {
        border-top: none;
      }
    }
    .user_info {
      & > div {
        background: #fff;
        & > div {
          display: flex;
          padding: 0 12px;
          height: 46px;
          align-items: center;
          border-bottom: 1px #F8FAF9 solid;
          & > div {
            &:last-child {
              text-align: right;
              width: 100%
            }
          }
        }
      }
    }
    .saveinfo {
      width: calc(100% - 15px);
      height: 42px;
      line-height: 42px;
      font-size: 16px;
      margin-top: 24px;
      color: #fff;
      border-radius: 42px;
      background-color: @common-color;
    }
  }

</style>
